<template>
  <div >
    <el-dialog :close-on-click-modal="false"
               draggable v-model="visible" width="20%">
      <div style="text-align: center;font-size: 22px; font-weight: 600">{{ code }}</div>
      <img :src="qrcode" alt="QR Code" style="width:100%;height:100%"/>
      <template #footer>
				<span class="dialog-footer">
					<el-button @click="visible = false">{{ $t('common.cancelButtonText') }}</el-button>
				</span>
      </template>
    </el-dialog>
  </div>
</template>

<script lang="ts" name="spDialog" setup>
import {ref} from 'vue';
import {MaybeRefOrGetter} from "@vueuse/core";
import {useQRCode} from '@vueuse/integrations/useQRCode'
// 定义变量内容
const dataFormRef = ref();
const visible = ref(false);

let qrcode = useQRCode("")

let code = ref();

export declare function useQRCode(
    text: MaybeRefOrGetter<string>,
    options?: QRCode.QRCodeToDataURLOptions,
): Ref<string>

// 打开弹窗
const openDialog = async (row: any) => {
  code.value = row.barcode
  qrcode = useQRCode(row.barcode)
  visible.value = true;
  // 重置表单数据
  nextTick(() => {
    dataFormRef.value?.resetFields();
  });

};
// 暴露变量
defineExpose({
  openDialog,
});
</script>
